fix(sidebar): center notification dot on avatar corner#306
Merged
Just-Insane merged 2 commits intodevfrom Mar 16, 2026
Merged
Conversation
The dot badge (8px circle) was positioned at top:-2px, left:-2px which placed its CENTER 2px inside the avatar corner rather than on the corner itself. Changed to top:-4px, left:-4px so the dot is centered exactly on the top-left corner of the avatar, matching how the count badge (top:-6px for ~12px height) is positioned. Also updated the folder compound variant dot position from +2px to 0px for consistency. Fixes #293
Contributor
Deploying with
|
| Status | Preview URL | Commit | Alias | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! | https://pr-306-sable.raspy-dream-bb1d.workers.dev | bbec983 | pr-306 |
Mon, 16 Mar 2026 19:30:35 GMT |
Contributor
Doesn't appear to be fixed for me
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #293 — The notification dot badge appeared off-center relative to the avatar icon in the sidebar.
Root cause
The dot badge (
Badge size="200", which is 8px × 8px) was positioned attop: -2px, left: -2px. This placed the dot's center at(2px, 2px)inside the avatar corner rather than at the corner itself.By comparison, the count badge uses
top: -6px, left: -6pxwhich correctly centers a ~12px badge on the corner.Fix
Changed the dot badge position from
top: -2px, left: -2pxtotop: -4px, left: -4px(i.e.-(8/2) = -4pxfor an 8px dot). This centers the dot exactly on the top-left corner of the avatar, consistent with how the count badge is positioned.Files changed:
Sidebar.css.ts— updated CSS recipehasCount: falsevariant and folder compound variantHomeTab.tsx,DirectTab.tsx,DirectDMsList.tsx,SpaceTabs.tsx— updated inlineleftstyle for the dot case